<template>
    <div>
        <div class="activity-right" @click="hideSel($event)" style="padding-top:20px;">
            <h3>添加商品</h3>
            <el-form ref="form" :rules="rules" :model="form" label-width="120px">
                <div class="form">
                    <el-form-item label="是否为爆款:">
                        <el-checkbox v-model="hotSaleStatus">{{hotSaleStatus ? '是': '否'}}</el-checkbox>
                    </el-form-item>
                    <el-form-item label="爆款开始时间:" v-if="hotSaleStatus">
                        <el-date-picker v-model="presaleTime" type="datetime"  placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="商品名称:" prop="goodsName">
                        <el-input style="width:400px" v-model="form.goodsName" type="text" placeholder="请输入商品名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="商品品牌:" prop="brandArray">
                        <el-select style="width:400px" filterable v-model="form.brandId" placeholder="选择品牌">
                            <el-option v-for="item in brandArray" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动专场:" prop="activityArray">
                        <el-select style="width:400px" filterable v-model="form.activityId" @change="getActivity" placeholder="选择活动">
                            <el-option v-for="item in activityArr" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.activityId != null&& form.activityId" label="活动状态:" prop="activityStatus">
                        <template>{{activityStatus == 0 ? '展示' : (activityStatus == 1 ? '售卖中':(activityStatus == 2 ? '结束' :''))}}</template>
                    </el-form-item>
                    <el-form-item label="商品介绍:" prop="goodsDesc">
                        <el-input type='textarea' :rows="5" style="width:400px" v-model="form.goodsDesc"></el-input>
                    </el-form-item>
                    <el-form-item label="商品原价:" prop="goodsPrice">
                        <el-input style="width:400px" v-model="form.goodsPrice" @change="handleOrignailChange" type="text" placeholder="请输入商品原价" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="商品折扣率:" prop="discountRate">
                        <el-input style="width:400px" :disabled="true" v-model="form.discountRate" @change="handleOrignailChange" type="text" placeholder="请输入折扣率 (0-10之间的整数或一位小数)" clearable> </el-input>
                    </el-form-item>
                    <el-form-item label="商品折扣价:" prop="discountPrice">
                        <el-input style="width:400px" v-model="form.discountPrice" @change="changeDiscountPrice" type="text" placeholder="请输入商品折扣价" ></el-input>
                    </el-form-item>
                    <el-form-item label="会员折扣率:" prop="memberRate">
                        <el-input style="width:400px" :disabled="true" v-model="form.memberRate" @change="changeMemberRate" type="text" placeholder="请输入商品折扣价" ></el-input>
                    </el-form-item>
                    <el-form-item label="会员折扣价:" prop="memberPrice">
                        <el-input style="width:400px" v-model="form.memberPrice" @change="changeMemberPrice" type="text" placeholder="请输入商品折扣价" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="商品状态:" prop="soldout">
                        <el-checkbox disabled v-model="status">{{status ? '有效': '无效'}}</el-checkbox>
                    </el-form-item>
                    <el-form-item label="选择款数:" >
                        <el-select v-model="goodsItemCountVal" @change="goodsItemCountChange" placeholder="请选择">
                            <el-option
                                v-for="item in goodsItemCount"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品编号:" prop="goodsCode">
                        <el-input style="width:400px" v-model="form.goodsCode" type="text" placeholder="请输入商品编号" clearable></el-input>
                    </el-form-item>
                    <!-- <el-form-item class="goodsItem" label="商品类目:" prop="category">
                        <div class="selGoodsItem" style="width:400px" @click="selGoodsItem">
                            <template v-if="goodsItem.length > 0">
                                <span class="goddsItemSpan" :key="item.id" v-for="(item,index) in goodsItem">{{item.name}}{{index == 2 ? '' :' - ' }}</span>
                            </template>
                            <template v-else>
                                <span class="gray">请选择</span>
                            </template>
                        </div>
                        <section v-if="isShowGoodsItem">
                            <template>
                                <ul class="el-cascader-menu">
                                    <li :key="item.id" v-for="item in goodsItem1" @click="loadTwo(item.categoryId,item.categoryName)" class="el-cascader-menu__item el-cascader-menu__item--extensible selList">{{item.categoryName}}</li>
                                </ul>
                                <ul v-if="goodsItem2 != ''" class="el-cascader-menu">
                                    <li :key="item.id" v-for="item in goodsItem2" @click="loadTree(item.categoryId,item.categoryName)" class="el-cascader-menu__item el-cascader-menu__item--extensible selList">{{item.categoryName}}</li>
                                </ul>
                                <ul v-if="goodsItem3 != ''" class="el-cascader-menu">
                                    <li :key="item.id" v-for="item in goodsItem3" @click="selDone(item.categoryId,item.categoryName)" class="el-cascader-menu__item el-cascader-menu__item--extensible selList">{{item.categoryName}}</li>
                                </ul>
                            </template>
                        </section>
                    </el-form-item> -->
                </div>
                <div id="box">
                    <div class='addGoods-1' v-for='(item,idx) in paramList' :key="item.id">
                        <section>
                            <ul>
                                <li>
                                    <el-form-item label="选择颜色:" prop="goodsColour">
                                        <el-input style="width:300px" v-model="item.goodsColour" type="text" placeholder="请输入商品颜色" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="商品库存:" prop="stock">
                                        <ul class='stock'>
                                            <li  :key='item1.id' v-for="item1 in item.goodsSize">
                                                <el-input style="width:130px;" v-model="item1.size" type="text" placeholder="尺码" clearable></el-input>
                                                :
                                                <el-input style="width:80px;" v-model="item1.num" type="text" placeholder="数量" clearable></el-input>
                                            </li>
                                        </ul>
                                        <div class="addSize" style="margin:5px">
                                            <el-button style="float:left" type="primary" @click="addgoodsSize(idx)">新增</el-button>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="商品轮播:" class="uploadWrap " v-loading="uploadLoading">
                                        <draggable v-model="item.goodsImg">
                                            <transition-group>
                                                <div class="prevImg" :key="index" v-for="(item1,index) in item.goodsImg" v-if="item.goodsImg.length > 0">
                                                    <img width="200" :src="item1" alt="" />
                                                    <i class="el-icon-error" @click="deleteImgList(item,index)"></i>
                                                </div>
                                            </transition-group>
                                        </draggable>
                                        <template v-if="item.goodsImg.length < 9">
                                            <div class="upload">
                                                <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" multiple @change="upload(idx,$event)" />
                                                <i class="el-icon-plus"></i>
                                            </div>
                                        </template>
                                        <p class="red">
                                            <small>最多可选择9张(第一张图片为商品封面图)</small>
                                        </p>
                                        <p class="red">
                                            <small>建议尺寸：不小于400 * 400</small>
                                        </p>
                                    </el-form-item>
                                    <section class="addColor">
                                        <el-button type="primary" @click="delColor(idx)">删除</el-button>
                                    </section>
                                </li>
                            </ul>
                        </section>
                    </div>
                </div>

            </el-form>
            <section class="submit">
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button type="primary" style="margin-left:10px" @click="$router.go(-1)">返回</el-button>
            </section>
        </div>
    </div>
</template>
<script>
import draggable from "vuedraggable";
import {
    getProducts,
    addGoods,
    getGoodsDetailsNew,
    updateGoods,
    updateGoodsStatus,
    getQiniuToken,
    qiniuBaseUrl,
    getCategory,
    getTagByStoreNo,
    getBrand,
    allActivityList,
    getActivityDetail
} from "../../data/postData";
export default {
    components: {
        draggable
    },
    data() {
        return {
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            getTagByStoreNo: null,
            form: {
                goodsName: "",
                goodsPrice: "",
                discountPrice: "",
                discountRate: "",
                storeNo: "",
                categoryId: "",
                goodsPic: "",
                soldout: "",
                brandId: "",
                goodsDesc: "",
                activityId: "",
                purchaseCost: "0",
                storePrice: "0",
                memberPrice: "",
                memberRate: 9,
                goodsCode:''
            },
            hotSaleStatus: false, // 是否为爆款
            presaleTime: new Date(), // 爆款开始时间
            dataForm: null,
            activityStatus: "",
            activityArr: [],
            status: true,
            disabled: false,
            addGoodsVal: null,
            paramList: [],
            brandArray: [],
            isShow1: false,
            goodsItemCount: [],
            goodsItemCountVal:'',
            soltArray: [
                {
                    value: "0",
                    label: "上架"
                },
                {
                    value: "1",
                    label: "下架"
                }
            ],
            categoryId: "",
            goodsItem: [],
            selGoodItemVal: [],
            isShowGoodsItem: false,
            goodsItem1: [],
            goodsItem2: [],
            goodsItem3: [],
            textarea: "",
            discount: false,
            coverUploadLoading: false,
            uploadLoading: false,
            rules: {
                goodsName: [
                    {
                        required: true,
                        message: "请输入商品名称",
                        trigger: "blur"
                    }
                ],
                goodsPrice: [
                    {
                        required: true,
                        message: "请输入商品原价",
                        trigger: "blur"
                    }
                ],
                discountRate: [
                    {
                        required: true,
                        message: "请输入商品折扣价",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            if (!/^\d(\.\d)?$/.test(value)) {
                                callback(
                                    new Error("正确输入折扣率：例'9'或'9.5'")
                                );
                                value = "";
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                memberRate: [
                    {
                        required: true,
                        message: "请输入会员折扣价",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            if (!/^\d(\.\d)?$/.test(value)) {
                                callback(
                                    new Error("正确输入折扣率：例'9'或'9.5'")
                                );
                                value = "";
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                soldout: [
                    {
                        required: true,
                        message: "请选择商品状态",
                        trigger: "blur"
                    }
                ],
                memberPrice: [
                    {
                        required: true,
                        message: "请选择会员折扣价",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            if (!/^\d+(\.\d(\d)?)?$/.test(value)) {
                                callback(
                                    new Error(
                                        "正确输入会员折扣价：保留两位小数"
                                    )
                                );
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                category: [
                    {
                        required: true,
                        message: "请选择商品类目",
                        trigger: "blur"
                    }
                ],
                brandArray: [
                    {
                        required: true,
                        message: "请选择商品品牌",
                        trigger: "blur"
                    }
                ],
                activityArray: [
                    {
                        required: true,
                        message: "请选择活动专场",
                        trigger: "blur"
                    }
                ],
                storePrice: [
                    { required: true, message: "请输入平台价", trigger: "blur" }
                ],
                discountPrice: [
                    {
                        required: true,
                        message: "请输入折扣价",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            if (!/^\d+(\.\d(\d)?)?$/.test(value)) {
                                callback(
                                    new Error("正确输入折扣价：保留两位小数")
                                );
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    mounted() {
        // 设置款数
        for (let i = 1; i <= 20; i++) {
            this.goodsItemCount.push({
                label: i,
                value: i
            })
            
        }
        // 获取三级列表的第一级
        // this.$fetch.get(getCategory + "?categoryId=0").then(res => {
        //     this.goodsItem1 = res.data;
        // });
        var params = {
            data: {}
        };
        this.$fetch
            .post(getBrand, params)
            .then(res => {
                console.log(res.data);
                res.data.forEach((item, i) => {
                    this.brandArray.push({
                        value: item.id,
                        label: item.name
                    });
                });
            })
            .catch(err => {});

        var params1 = {
            data: {
                storeNo: this.user.storeNo
            }
        };
        this.$fetch
            .post(allActivityList, params1)
            .then(res => {
                console.log(res.data, "123");
                var activity = [];
                res.data.forEach((val, i) => {
                    activity.push({ value: val.id, label: val.name });
                });
                this.activityArr = activity;
            })
            .catch(err => {});
        // this.getActivity(）
    },
    methods: {
        // 商品款数变化
        goodsItemCountChange(val){
            console.log(val)
            this.paramList = []
            for (let i = 0; i < val; i++) {
                this.addgoodsItem()
            }
        },
        getActivity() {
            this.getActivity();
        },
        //获取活动列表
        getActivity() {
            let params = {
                data: {
                    id: "" + this.form.activityId,
                    storeNo: this.user.storeNo
                }
            };
            console.log(params, "----params");
            this.$fetch.post(getActivityDetail, params).then(res => {
                this.activityStatus = res.data.status;
                console.log(this.activityStatus, "hahha");
            });
        },
        clickImage(index) {
            console.log(this.form.goodsUrl);
            console.log(index);
            this.imageNum = index;
            this.isShow1 = true;
        },
        closeImage() {
            this.isShow1 = false;
        },
        // 会员折扣率变动
        changeMemberRate() {
            let { memberRate, discountPrice, memberPrice } = this.form;

            console.log("memberRate", memberRate);
            if (memberRate && discountPrice) {
                this.form.memberPrice =
                    Math.round(discountPrice * memberRate) / 10;
            }
        },
        // 会员价变化
        changeMemberPrice() {
            let { memberRate, discountPrice, memberPrice } = this.form;
            if (+memberPrice > +discountPrice) {
                this.$message({
                    message: "会员折扣价不能大于商品折扣价",
                    type: "warning",
                    duration: 1500
                });
            } else if (memberPrice && discountPrice) {
                console.log(memberPrice, discountPrice);
                this.form.memberRate =
                    Math.round(memberPrice / discountPrice * 100) / 10;
            }
        },
        // 折扣价变动
        changeDiscountPrice() {
            this.form.discountRate = "";
            if (
                this.form.goodsPrice &&
                this.form.goodsPrice != "" &&
                this.form.discountPrice &&
                this.form.discountPrice != ""
            ) {
                this.form.discountRate =
                    Math.round(
                        (+this.form.discountPrice - +this.form.storePrice) *
                            100 /
                            +this.form.goodsPrice
                    ) / 10;
            }
            this.changeMemberPrice();
            this.changeMemberRate();
        },
        // 处理原价变动
        handleOrignailChange() {
            if (
                this.form.discountRate &&
                this.form.discountRate != "" &&
                this.form.goodsPrice &&
                this.form.goodsPrice != ""
            ) {
                this.form.discountPrice =
                    Math.round(
                        this.form.goodsPrice * this.form.discountRate / 10
                    ) + +this.form.storePrice;
            }
            this.changeMemberPrice();
            this.changeMemberRate();
        },
        // 添加款数
        addgoodsItem() {
            this.paramList.push({
                goodsColour: "",
                goodsCode: "",
                goodsImg: [],
                goodsSize: [
                    {
                        size: "S",
                        num: "0"
                    },
                    {
                        size: "M",
                        num: "0"
                    },
                    {
                        size: "L",
                        num: "0"
                    }
                ]
            });
        },
        // 添加库存尺码
        addgoodsSize(e) {
            this.paramList[e].goodsSize.push({
                size: "",
                num: "0"
            });
        },
        // 删除颜色
        delColor(idx) {
            console.log(idx);
            this.paramList.splice(idx, 1);
        },
        message(msg, icon) {
            this.$message({
                message: msg,
                type: icon ? icon : "success"
            });
        },
        submit() {
            let pp1 = false;
            let pp2 = false;
            let pp3 = false;
            let pp4 = false;
            let colorArr = [];
            let goodsCodeArr = [];
            let arrImg = [];
            let arrSto = [];
            let arrSize = [];
            console.log(new Date(this.presaleTime).getTime());
            this.paramList.forEach((itemo, m) => {
                let goodsize = [];
                console.log(itemo, m);
                if (itemo) {
                    colorArr.push(itemo.goodsColour);
                    goodsCodeArr.push(itemo.goodsCode);
                }
                itemo.goodsSize.forEach((itemg, d) => {
                    console.log(itemg, d, m, "d");
                    if (
                        itemg.num != "0" &&
                        itemg.num != "" &&
                        itemg.num <= 10000 &&
                        itemg.size != ""
                    ) {
                        // itemo.goodsSize.splice(d,1)
                        goodsize.push(itemg);
                    }
                });
                itemo.goodsSize = goodsize;
                console.log(itemo.goodsSize, "m", m);
                if (goodsize.length > 0) {
                    arrSize[m] = true;
                } else {
                    arrSize[m] = false;
                    this.$message({
                        message: "",
                        type: "warning",
                        duration: 1500
                    });
                }
                console.log(arrSize, "arrSize");
                console.log(goodsize, m, "goodsize");
                console.log(itemo.goodsSize, m, "itemo");
                for (let itemo1 in itemo) {
                    if (itemo1 == "goodsImg") {
                        console.log(itemo[itemo1]);
                        if (itemo[itemo1].length < 1) {
                            arrImg[m] = false;
                            this.$message({
                                message: "请上传图片",
                                type: "warning",
                                duration: 1500
                            });
                        } else {
                            // pp1 = true
                            arrImg[m] = true;
                        }
                        console.log(arrImg, "------------arrImg");
                        if (arrImg.indexOf(false) > -1) {
                            pp1 = false;
                        } else {
                            pp1 = true;
                        }
                    }
                }
            });
            console.log(arrSize, "arrSizearrSize");
            if (arrSize.indexOf(false) > -1) {
                pp2 = false;
                this.$message({
                    message: "商品库存不能为空且单个尺寸数量不大于10000",
                    type: "warning",
                    duration: 1500
                });
            } else {
                pp2 = true;
            }
            console.log(pp2, "arrSizepp2");
            // 判断商品颜色是否重复
            console.log(colorArr, "商品颜色组合");
            var s = colorArr.join(",") + ",";
            for (var i = 0; i < colorArr.length; i++) {
                if (colorArr.indexOf("") > -1) {
                    this.$message({
                        message: "请选择商品颜色！！",
                        type: "warning",
                        duration: 2000
                    });
                    pp3 = false;
                } else if (
                    s
                        .replace(colorArr[i] + ",", "")
                        .indexOf(colorArr[i] + ",") > -1
                ) {
                    this.$message({
                        message:
                            "商品颜色重复，请重新选择商品颜色！！" +
                            colorArr[i],
                        type: "warning",
                        duration: 2000
                    });
                    pp3 = false;
                    break;
                } else {
                    pp3 = true;
                }
            }
            //判断商品编码是否重复
            var s1 = goodsCodeArr.join(",") + ",";
            for (var i = 0; i < goodsCodeArr.length; i++) {
                if (goodsCodeArr.indexOf("") > -1) {
                    this.$message({
                        message: "请选择商品编号！！",
                        type: "warning",
                        duration: 2000
                    });
                    pp4 = false;
                } else if (
                    s1
                        .replace(goodsCodeArr[i] + ",", "")
                        .indexOf(goodsCodeArr[i] + ",") > -1
                ) {
                    this.$message({
                        message:
                            "商品编号重复，请重新填写商品编号！！" +
                            goodsCodeArr[i],
                        type: "warning",
                        duration: 2000
                    });
                    pp4 = false;
                    break;
                } else {
                    pp4 = true;
                }
            }
            console.log("pp", pp1, pp2, pp3);

            if (this.goodsItem.length == 3 && this.goodsItem[2].val) {
                this.form.categoryId = this.goodsItem[2].val;
            }

            if (this.form.goodsName == "") {
                this.$message({
                    message: "商品名称不能为空",
                    type: "warning",
                    duration: 1000
                });
            }
            if (
                this.hotSaleStatus &&
                (this.presaleTime == "" || this.presaleTime == 0)
            ) {
                this.$message({
                    message: "请输入爆款开始时间",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.form.goodsPrice == "") {
                this.$message({
                    message: "商品原价不能为空",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.form.discountRate == "") {
                this.$message({
                    message: "商品折扣率不能为空",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.form.memberRate == "") {
                this.$message({
                    message: "会员折扣率不能为空",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.form.brandId == "") {
                this.$message({
                    message: "选择商品品牌",
                    type: "warning",
                    duration: 1000
                });
            } else if (pp1 && pp2 && pp3 && pp4) {
                // else if(this.form.purchaseCost ==''||(+this.form.purchaseCost)<0){
                //     this.$message({
                //         message:'商品代购价不能为空,且为大于0的数',
                //         type:'warning',
                //         duration:1000
                //     })
                // }
                // if(this.form.discountPrice && this.form.discountPrice !='' && this.form.purchaseCost && this.form.purchaseCost !=''){
                //     //this.form.goodsName = this.form.goodsName + ' -¥ ' + (+this.form.discountPrice)
                //     this.form.goodsName = this.form.goodsName + ' -¥' + (+this.form.discountPrice+(+this.form.purchaseCost))
                //    // this.form.discountPrice = (+this.form.discountPrice) + (+this.form.purchaseCost)
                // }
                this.$confirm("确认提交？").then(_ => {
                    var params = {
                        data: {
                            goodsName: this.form.goodsName,
                            brandId: this.form.brandId.toString(),
                            goodsDesc: this.form.goodsDesc,
                            goodsPrice: this.form.goodsPrice,
                            discountPrice: "" + this.form.discountPrice,
                            discountRate: "" + this.form.discountRate,
                            memberRate: "" + this.form.memberRate,
                            memberPrice: "" + this.form.memberPrice,
                            //"purchaseCost":this.form.purchaseCost,
                            storeNo: this.user.storeNo,
                            categoryId: this.form.categoryId.toString() || "",
                            soldout: this.form.soldout.toString(),
                            goodsPic:
                                this.paramList[0].goodsImg[0] &&
                                this.paramList[0].goodsImg[0] != ""
                                    ? this.paramList[0].goodsImg[0]
                                    : "",
                            paramList: this.paramList,
                            activityId: "" + this.form.activityId
                        }
                    };
                    if (this.hotSaleStatus) {
                        params.data.hotSale = 1;
                        params.data.presaleTime = +new Date(
                            this.presaleTime
                        ).getTime();
                    }
                    console.log("params", params);
                    // return
                    this.$fetch
                        .post(addGoods, params)
                        .then(res => {
                            this.$message({
                                message: res.message,
                                type: "success",
                                duration: 1000
                            });
                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 1500);
                        })
                        .catch(err => {
                            this.$message({
                                message: err.message,
                                type: "warning",
                                duration: 1000
                            });
                        });
                });
            }
        },
        hideSel(e) {
            let className = e.target.className;
            if (
                className.search("selList") < 0 &&
                className.search("selGoodsItem") < 0 &&
                className.search("gray") < 0
            ) {
                this.isShowGoodsItem = false;
            }
        },
        // // 多级项目选择
        selGoodsItem(res) {
            this.isShowGoodsItem = true;
            this.goodsItem2 = [];
            this.goodsItem3 = [];
            this.goodsItem = [];
        },
        loadTwo(val, name) {
            this.goodsItem = [];
            this.goodsItem.push({
                val: val,
                name: name
            });
            this.$fetch
                .get(getCategory + "?categoryId=" + val)
                .then(res => {
                    this.goodsItem2 = res.data;
                    console.log("goodsItem3", this.goodsItem3);
                })
                .catch(err => {
                    this.message(err.message, "error");
                });
        },
        loadTree(val, name) {
            console.log("loadTree");
            this.$fetch
                .get(getCategory + "?categoryId=" + val)
                .then(res => {
                    this.goodsItem[1] = {
                        val: val,
                        name: name
                    };
                    this.goodsItem3 = res.data;
                    console.log("goodsItem3", this.goodsItem3);
                })
                .catch(err => {
                    this.message(err.message, "error");
                });
        },
        selDone(val, name) {
            this.goodsItem[2] = {
                val: val,
                name: name
            };
            this.isShowGoodsItem = false;
        },
        //限制图片750*750
        upload(idx, e) {
            console.log(idx);
            const that = this;
            console.log(idx);
            var files = e.target.files;
            console.log(files, "files");
            for (let i = 0; i < files.length; i++) {
                let width, height;
                let reader = new FileReader();
                reader.onload = function(e) {
                    var image = new Image();
                    image.onload = function() {
                        width = image.width;
                        height = image.height;
                        if (width >= 400 && height >= 400 && width == height) {
                            that.uploadLoading = true;
                            that.$http
                                .get(getQiniuToken, {
                                    params: {
                                        wxUid: "",
                                        wxSid: ""
                                    }
                                })
                                .then(res1 => {
                                    let config = {
                                        headers: {
                                            "Content-Type":
                                                "multipart/form-data"
                                        }
                                    };
                                    let formdata = new FormData(); //创建form对象
                                    formdata.append(
                                        "file",
                                        files[i],
                                        files[i].name
                                    );
                                    formdata.append("chunk", "0"); //断点传输
                                    formdata.append("chunks", "1");
                                    formdata.append("token", res1.data.uptoken);
                                    console.log(res1.data.uptoken);
                                    // http://goods.dingdian.xin 图片上传地址
                                    that.$http
                                        .post(
                                            "http://up-z1.qiniup.com",
                                            formdata,
                                            config
                                        )
                                        .then(res2 => {
                                            console.log(res2);
                                            if (res2.data.key != "" && i < 9) {
                                                // 加判断是第几个商品
                                                that.paramList[
                                                    idx
                                                ].goodsImg.push(
                                                    qiniuBaseUrl +
                                                        res2.data.key +
                                                        "?imageMogr2/thumbnail/400000@"
                                                );
                                                that.paramList[
                                                    idx
                                                ].goodsImg = that.paramList[
                                                    idx
                                                ].goodsImg.slice(0, 9);
                                                that.$message({
                                                    title: "提示",
                                                    message: "图片上传成功",
                                                    type: "success",
                                                    duration: 1500
                                                });
                                            }
                                            that.uploadLoading = false;
                                        });
                                });
                        } else {
                            that.$message({
                                title: "提示",
                                message: "上传图片尺寸要求不小于400*400方图",
                                type: "warning"
                            });
                        }
                    };
                    image.src = e.target.result;
                };
                reader.readAsDataURL(files[i]);
            }
        },
        deleteImgList(idx, id) {
            console.log("--------");
            console.log(id);
            console.log(idx);
            idx.goodsImg.splice(id, 1);
            // idx.goodsImg.forEach((val,i)=>{
            //     if (val == id) {
            //         idx.goodsImg.splice(i,1)
            //     }
            // })
        },
        goToPrev(item, idx) {
            console.log("999999999999");
            console.log(item);
            console.log(idx);
            let newImg = item.goodsImg.slice();
            if (idx > 0) {
                let now = newImg[idx].toString();
                let prev = newImg[idx - 1].toString();

                console.log(idx, now, prev);
                newImg[idx] = prev;
                newImg[idx - 1] = now;
                console.log("goodsUrl", newImg);
            }
            item.goodsImg = newImg;
        }
    }
};
</script>

<style scoped lang="less">
@import url("../../style/activity.less");
@import url("../../style/goods.less");
.activity-right {
    h3 {
        margin-bottom: 20px;
    }
}
.stock {
    display: inline-block;
    margin-top: -10px;
    margin-left: -10px;;
    li {
        float: left;
        margin: 10px;
        
        input {
            width: 40px;
        }
    }
}
.addGoods-1 {
    margin-top: 20px;
    border-bottom: 2px solid #000;
}
.addColor {
    margin-bottom: 10px;
    margin-left: 80%;
}
.submit {
    margin-left: 0;
    margin-top: 50px;
}
.form {
    margin-bottom: 20px;
    border-bottom: 2px solid #000;
}
</style>